<template>
  <section id="skills" class="py-20 bg-gray-50" ref="skillsSection">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-4 text-gray-800 transform translate-y-8 opacity-0 transition-all duration-700">专业技能</h2>
      <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12 transform translate-y-8 opacity-0 transition-all duration-700 delay-200">深耕技术领域多年，掌握全栈开发所需的各项核心技能，能够独立完成完整项目的设计与开发</p>

      <!-- 技能卡片区域 - 使用v-for循环渲染 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <div 
          v-for="(skill, index) in skills" 
          :key="skill.id" 
          class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-500 transform translate-y-10 opacity-0"
          :style="{ transitionDelay: (100 + index * 200) + 'ms' }"
        >
          <div class="w-12 h-12 rounded-full flex items-center justify-center mb-4 transform transition-transform duration-500 hover:scale-110" :class="skill.bgClass">
            <svg class="w-6 h-6" :class="skill.iconClass" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="skill.iconPath"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold mb-2 transform translate-y-4 opacity-0 transition-all duration-500 delay-300">{{ skill.title }}</h3>
          <div class="flex flex-wrap gap-2 mb-4 opacity-0 transition-opacity duration-500 delay-400">
            <span v-for="tag in skill.tags" :key="tag" :class="skill.tagClass">{{ tag }}</span>
          </div>
          <p class="text-gray-600 text-sm opacity-0 transition-opacity duration-500 delay-500">{{ skill.description }}</p>
        </div>
      </div>

      <!-- 统计数据区域 - 使用v-for循环渲染 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div 
          v-for="(stat, index) in stats" 
          :key="stat.id" 
          class="bg-white p-6 rounded-lg shadow-md text-center transform translate-y-10 opacity-0 transition-all duration-700"
          :style="{ transitionDelay: (200 + index * 200) + 'ms' }"
        >
          <div class="text-3xl font-bold mb-1 counter" :class="stat.valueClass">{{ stat.value }}</div>
          <div class="text-gray-600">{{ stat.label }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const skillsSection = ref(null);

// 技能数据数组
const skills = [
  {
    id: 1,
    title: '前端开发',
    bgClass: 'bg-blue-100',
    iconClass: 'text-blue-600',
    iconPath: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
    tags: ['Vue.js', 'React', 'TypeScript'],
    tagClass: 'bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded',
    description: '精通现代前端框架与工具，注重性能优化与用户体验，具备大型应用开发经验。'
  },
  {
    id: 2,
    title: '后端开发',
    bgClass: 'bg-green-100',
    iconClass: 'text-green-600',
    iconPath: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
    tags: ['Node.js', 'Python', 'Java'],
    tagClass: 'bg-green-100 text-green-800 text-xs px-2 py-1 rounded',
    description: '熟练掌握多种后端语言和框架，具备微服务架构设计和实现经验。'
  },
  {
    id: 3,
    title: '数据库',
    bgClass: 'bg-purple-100',
    iconClass: 'text-purple-600',
    iconPath: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
    tags: ['MySQL', 'MongoDB', 'Redis'],
    tagClass: 'bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded',
    description: '精通关系型与非关系型数据库，具备复杂数据模型设计和优化经验。'
  },
  {
    id: 4,
    title: '云服务',
    bgClass: 'bg-orange-100',
    iconClass: 'text-orange-600',
    iconPath: 'M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z',
    tags: ['AWS', 'Docker', 'K8s'],
    tagClass: 'bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded',
    description: '深入理解云原生架构，熟练使用容器技术和云服务进行应用部署。'
  }
];

// 统计数据数组
const stats = [
  {
    id: 1,
    value: '5年+',
    label: '开发经验',
    valueClass: 'text-blue-600'
  },
  {
    id: 2,
    value: '50+',
    label: '项目案例',
    valueClass: 'text-green-600'
  },
  {
    id: 3,
    value: '99%',
    label: '客户满意度',
    valueClass: 'text-purple-600'
  },
  {
    id: 4,
    value: '24/7',
    label: '技术支持',
    valueClass: 'text-orange-600'
  }
];

onMounted(() => {
  // 检测元素是否在视口中
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 显示标题和描述
        const title = entry.target.querySelector('h2');
        const description = entry.target.querySelector('p.text-gray-600');
        if (title) {
          title.style.transform = 'translateY(0)';
          title.style.opacity = '1';
        }
        if (description) {
          description.style.transform = 'translateY(0)';
          description.style.opacity = '1';
        }

        // 显示技能卡片
        const skillCards = entry.target.querySelectorAll('.grid > div');
        skillCards.forEach(card => {
          card.style.transform = 'translateY(0)';
          card.style.opacity = '1';
          // 显示卡片内元素
          const cardTitle = card.querySelector('h3');
          const tagContainer = card.querySelector('.flex.flex-wrap');
          const cardText = card.querySelector('p.text-sm');
          if (cardTitle) {
            cardTitle.style.transform = 'translateY(0)';
            cardTitle.style.opacity = '1';
          }
          if (tagContainer) tagContainer.style.opacity = '1';
          if (cardText) cardText.style.opacity = '1';
        });
      }
    });
  }, { threshold: 0.1 });

  if (skillsSection.value) {
    observer.observe(skillsSection.value);
  }
});
</script>